<template>
  <div class="drawer-container">
    <el-drawer title="详情页面" :visible.sync="isOpen" @closed="handleClose" :size="drawerWidth">
      <!-- <ProductDetail /> -->
      <div class="detail-container">
        <div class="main">
          <div class="main-img">
            <img :src="data && data.imgUrl" :alt="data && data.name">
          </div>
          <div class="main-desc">
            <h1>{{ data && data.name }}</h1>
            <div class="price">{{ data && data.price }}
              <el-rate class="rate" v-model="value" disabled show-score text-color="#ff9900" score-template="{value}">
              </el-rate>
            </div>

            <div class="phoneType">
              手机类型：{{ data && data.phoneType }}
            </div>
            <div class="publishTime">发布时间：2022-09-01</div>
            <div class="product-desc">产品描述：
              <div class="detail-desc">海岛设计，形随心动 | 超聚光 XMAGE 影像，超聚光夜视长焦 | 双向北斗卫星消息，灵犀通信，5100 mAh 超大电池，88 W 超级快充 Turbo
              </div>
            </div>
          </div>
        </div>
        <div class="other">
          <div class="other-top">
            <div class="canshu-card">
              <i class="iconfont">&#xe617;</i>
              <div class="canshuName">中央处理器</div>
              <div class="canshu">{{ data && data.CPU }}</div>
            </div>
            <div class="canshu-card">
              <i class="iconfont">&#xe68e;</i>
              <div class="canshuName">运行内存</div>
              <div class="canshu">{{ data && data.RAM }}</div>
            </div>
            <div class="canshu-card">
              <i class="iconfont">&#xe60d;</i>
              <div class="canshuName">尺寸</div>
              <div class="canshu">{{ data && data.size }}</div>
            </div>
            <div class="canshu-card">
              <i class="iconfont">&#xe608;</i>
              <div class="canshuName">电池容量</div>
              <div class="canshu">{{ data && data.battery }}</div>
            </div>
          </div>
          <div class="other-down">
            <div class="canshu-card">
              <i class="iconfont">&#xe61c;</i>
              <div class="canshuName">存储空间</div>
              <div class="canshu">{{ data && data.ROM }}</div>
            </div>
            <div class="canshu-card">
              <i class="iconfont">&#xe606;</i>
              <div class="canshuName">充电功率</div>
              <div class="canshu">{{ data && data.charge }}</div>
            </div>
            <div class="canshu-card">
              <i class="iconfont">&#xe60b;</i>
              <div class="canshuName">指纹解锁</div>
              <div class="canshu">{{ data && data.fingerprint }}</div>
            </div>
            <div class="canshu-card">
              <i class="iconfont">&#xe7a5;</i>
              <div class="canshuName">面容ID</div>
              <div class="canshu">{{ data && data.faceId }}</div>
            </div>
          </div>
        </div>
      </div>

    </el-drawer>
  </div>
</template>

<script>
import ProductDetail from "./ProductDetail.vue";
export default {
  components: {
    ProductDetail,
  },
  props: ["data", "openDrawer"],
  data() {
    return {
      isOpen: false,
      drawerWidth: "40%",
      value: 3.7
    };
  },
  methods: {},
  watch: {
    openDrawer() {
      this.isOpen = this.openDrawer;
    },

  },
  methods: {
    handleClose() {
      this.$emit("close", false);
      this.isOpen = false;
    },
  },
};
</script>
<style lang="less">
.detail-container {
  width: 100%;
  padding: 0 20px;

  .main {
    height: 300px;
    border-bottom: 1px solid rgb(234, 234, 234);
    border-top: 1px solid rgb(236, 236, 236);
    display: flex;

    .main-img {
      width: 250px;
      display: flex;
      align-items: center;

      img {
        width: 100%;
      }
    }

    .main-desc {
      width: 100%;
      margin: 20px 10px;
      text-align: start;

      h1 {
        margin-bottom: 15px;
        font-size: 30px;
        border-bottom: 1px solid rgb(204, 204, 204);
        width: 350px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price {
        color: orangered;
        margin-bottom: 10px;
        display: flex;

        .rate {
          margin: 2px 0 0 30px;
        }
      }

      .phoneType {
        margin-bottom: 10px;
      }

      .publishTime {
        margin-bottom: 10px;
      }

      .product-desc {
        position: relative;
        margin-top: 10px;

        .detail-desc {
          position: absolute;
          top: 0px;
          left: 80px;
          width: 300px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }

    }
  }
}

.other {
  width: 100%;
  // border: 1px solid red;
  height: 350px;
  margin-top: 30px;

  .other-top,
  .other-down {
    width: 100%;
    height: 100px;
    // border: 1px solid green;
    margin-top: 20px;
    display: flex;
    justify-content: space-around;

    .canshu-card {
      height: 100px;
      width: 100px;
      padding: 10px;
      // border: 1px solid red;
      border-radius: 15px;
      box-shadow: 3px 3px 15px #e9e9e9;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      i {
        font-size: 35px;
        color: rgb(145, 145, 145);
      }

      .canshuName {
        color: black;
        font-weight: bold;
      }

      .canshu {
        color: gray;
        font-size: 15px;
      }
    }
  }
}
</style>
